<%@page import="java.util.ArrayList" import="model.Measurement"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>INTI3E Prototype</title>
		<script src="../jwplayer/jwplayer.js" type="text/javascript"></script>
		<link rel="stylesheet" href="layout.css" type="text/css" />
		<jsp:include page="includes/initialize.jsp" flush="true" />
		
		<script>
			$(document).ready(function() {
				setInterval("loadXMLDoc();", 5000);
			});
		</script>
		
		<script type="text/javascript">
			function loadXMLDoc() {
				var xmlhttp;
				if (window.XMLHttpRequest) {
					xmlhttp = new XMLHttpRequest();
				} else {// code for IE6, IE5
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange = function() {
					if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						document.getElementById("homeInfo").innerHTML = xmlhttp.responseText;
					}
				}
		
				xmlhttp.open("GET", "CurrentMeasurement", true);
				xmlhttp.send();
			}
		</script>
	</head>
	<body>
		<jsp:include page="includes/menu.jsp" flush="true" />
		&nbsp;
		<div id="wrapper">
			<div id="webcam">
				<div id="container">Loading the player ...</div>
				<script type="text/javascript">  	
					  jwplayer('container').setup({
				    'flashplayer': 'jwplayer/player.swf',
				    'id': 'playerID',
			        'file': "http://145.76.18.59:8080/stream.flv",
				    'width': '350',
				    'height': '240',
				});
			  	</script>
			</div>
	
			<div id="homeInfo">
				<table id="hor-minimalist-a">
					<%
						ArrayList<Measurement> latestMeasurements = (ArrayList<Measurement>) request
								.getAttribute("latestMeasurements");
					%>
					<tr>
						<th scope="col">Temperatuur</th>
						<td>
							<%
								out.println(latestMeasurements.get(3).getValue());
							%>
						</td>
					</tr>
					<tr>
						<th scope="col">Luchtvochtigheid</th>
						<td>
							<%
								out.println(latestMeasurements.get(4).getValue());
							%>
						</td>
					</tr>
					<tr>
						<th scope="col">Deur</th>
						<%
							if (latestMeasurements.get(2).getValue() == 0) {
								out.println("<td><img src='images/dicht.png' width='40' height='40'/></td>");
							} else {
								out.println("<td><img src='images/open.png' width='40' height='40'/></td>");
							}
						%>
					</tr>
					<tr>
						<th scope="col">Licht</th>
						<%
							if (latestMeasurements.get(1).getValue() == 0) {
								out.println("<td><img src='images/uit.png' width='30' height='40'/></td>");
							} else {
								out.println("<td><img src='images/aan.png' width='30' height='40'/></td>");
							}
						%>
					</tr>
					<tr>
						<th scope="col">Laatste beweging</th>
						<td>
							<%
								out.println(latestMeasurements.get(0).getMeasureDate());
							%>
						</td>
					</tr>
				</table>
				<form method="post" action="SensorServlet?page=lamp">
					<%
						if (latestMeasurements.get(1).getValue() == 0) {
					%>
							<input type="submit" value="Zet de lamp aan" />
					<%
						} else {
					%>
							<input type="submit" value="Zet de lamp uit" />
					<%
						}
					%>
				</form>
			</div>
		</div>
		<jsp:include page="includes/footer.jsp" flush="true" />
	</body>
</html>